  import React from 'react';
  import { Input } from 'antd';
  import { DatePicker, Space } from 'antd';
  import { Select }  from 'antd';
  import { Button, Menu, Dropdown } from 'antd';
  const { RangePicker } = DatePicker;
  import { Table,Radio, Divider } from 'antd';
  import { useState } from 'react';
  const { Option } = Select;
  import '../absence/index.css';
  // 冯小建
  const columns = [
    {
      title: '日期',
      dataIndex: 'name',
      width: 150,
       
    },
    {
      title: '小组',
      dataIndex: 'age',
      width: 150,
       
    },
    {
      title: '院系',
      dataIndex: 'address',
       
    },
    {
      title: '专业',
      dataIndex: 'address',
       
    },
    {
      title: '班级',
      dataIndex: 'address',
       
    },
    {
      title: '项目名称实训老师',
      dataIndex: 'address',
       
    },
    {
      title: '责任老师',
      dataIndex: 'address',
       
    },
    {
      title: '学号',
      dataIndex: 'address',
       
    },
    {
      title: '姓名',
      dataIndex: 'address',
       
    },
    {
      title: '考勤情况',
      dataIndex: 'address',
       
    },
    {
      title: '应签到',
      dataIndex: 'address',
       },
  {
    title: '实签到',
    dataIndex: 'address',
     
  },
  {
    title: '应签退',
    dataIndex: 'address',
     
  },
  {
    title: '实签退',
    dataIndex: 'address',
     
  },
  {
    title: '操作',
    dataIndex: 'address',
     
  },
];
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}


// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

const date_list: readonly DataType[] | undefined = [];
for (let i = 0; i < 100; i++) {
  date_list.push({
    key: i,
    name: `Edward King ${i}`,
    age: 20,
    address: `London, Park Lane no. ${i}`,
  });
}
const Absence = () => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
  return (
       <div>
        <div className="Top4">
            
          <div className="spn">提交日期：
          <RangePicker className="rq" />
          </div>

          <div className="spn"><text>院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系：</text>
          <Select className="sel" size="small"  placeholder="请选择">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
          </div>

          <div className="spn">专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：
            <Select className="sel" size="small"  placeholder="请选择">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
            </div>

            <div className="spn">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：
            <Select className="sel" size="small"  placeholder="请选择">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
            </div>

           
        </div>

        <div className="Top4">

        <div className="spn">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：
              <Select  placeholder="请选择" size="small" className="sel" >
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="tom">Tom</Option>
              </Select>
              </div>

          <div className="spn">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
          <Select className="sel" size="small"  placeholder="请选择">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
            </div>

              <div className="spn">
              <span>学院姓名：</span>
              <DatePicker className="rq" />
              </div>

              <div className="spn">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：
              <Input  className="sel" placeholder="请录入"></Input>
              </div>
            </div>
            <div  className="Top4">
              <div className="spn">请假原因：
              <Select  placeholder="请选择" size="small" className="sel" >
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="tom">Tom</Option>
              </Select>
              </div>

              <div className="spn">审批状态：
              <Select  placeholder="请选择" size="small" className="sel" >
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="tom">Tom</Option>
              </Select>
              </div>

                <div className="div_but"> 
                 <Button className="bt" size="large"  type="primary">查询</Button> 
                 <Button size="large"  className="bt">重置</Button> 
                </div> 
                <div className="div_but2"> 
                 <Button className="bt" size="large"  type="primary">审批通过</Button> 
                 <Button size="large"  className="bt">审批不通过</Button> 
                 <div className="tis">当选中产生提示</div>
                </div> 
               
            </div> 

        <div className="box_tab3"><Table rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns}
        dataSource={date_list} pagination={{ pageSize: 5 }} scroll={{ y: 400 }} /></div>  
      
    </div>
  );
};

export default Absence;
